<template>
	<view class="userInfo-container">
		<view class="userInfo-box">
			<view class="info-item">
				<view class="label">账号</view>
				<view class="value">{{ userStore.userInfo.id }}</view>
			</view>
			<view class="info-item">
				<view class="label">姓名</view>
				<view class="value">{{ userStore.userInfo.userName }}</view>
			</view>
			<view @click="goForgetPassword('password')" class="info-item">
				<view class="label">密码</view>
				<view class="value">
					<text>修改密码</text>
					<image src="@/static/go-icon1.png" class="go-icon"></image>
				</view>
			</view>
			<view @click="goForgetPassword('phone')" class="info-item">
				<view class="label">手机号</view>
				<view class="value">
					<text>{{ userStore.userInfo.tel }}</text>
					<image src="@/static/go-icon1.png" class="go-icon"></image>
				</view>
			</view>
		</view>
	</view>
	
	<view @click="openDailog" class="logout">退出登录</view>
	
	<commonDialog :dialogShow="dialogShow" :show-close-btn="false" dialogTitle="是否确认退出？" @closeSDialog="closeSDialog" @confirmSDialog="confirmSDialog" />
</template>
 
<script setup>
import { ref } from 'vue';
import { logout } from '@/api/login';
import { useUserStore } from '@/store/userStore';
import commonDialog from '@/components/common-dialog/index.vue'

// 实例化用户store
const userStore = useUserStore();

// 弹窗的显示
const dialogShow = ref(false);

// 打开确认退出弹窗
const openDailog = () => {
	dialogShow.value = true;
};

// 取消弹窗
const closeSDialog = () => {
	dialogShow.value = false;
};

// 确认退出
const confirmSDialog = async () => {
	const res = await logout();
	if (res.code === 200) {
		dialogShow.value = false;
		uni.showToast({
			title: '退出成功',
			icon: 'success',
			duration: 2000,
		});
		userStore.clearAll();
		userStore.$reset(); // 清空用户信息
		setTimeout(() => {
			uni.reLaunch({
				url: '/pages/login/index',
			});
		}, 2000);
	}
};

// 跳转到忘记密码页面
const goForgetPassword = (type) => {
 uni.navigateTo({
 	url: `/subPages/forgetPassword/index?pageType=${type}`,
 });	
};
</script>

<style lang="scss" scoped>
.userInfo-container {
	min-height: 100vh;
	padding: 24rpx;
	background-color: #f9f9f9;

	.userInfo-box {
		padding: 0 24rpx;
		border-radius: 16rpx;
		background-color: #fff;

		.info-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: nowrap;
			height: 104rpx;
			border-bottom: 2rpx solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.label {
				color: #999;
				font-size: 28rpx;
				line-height: 40rpx;
			}

			.value {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				font-size: 28rpx;
				line-height: 40rpx;
			}

			.go-icon {
				width: 10rpx;
				height: 16rpx;
				margin-left: 14rpx;
			}
		}
	}
}

.logout {
	position: fixed;
	left: 50%;
	bottom: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateX(-50%);
	width: 654rpx;
	height: 104rpx;
	font-size: 32rpx;
	font-weight: 500;
	color: $uni-main-color;
	border-radius: 80rpx;
	border: 2rpx solid $uni-main-color;
}
</style>
